<template>
  <div class="list-item-custom">
    <div class="header-button">
      <span>启用：<je-checkbox v-model:checked="isChecked" /> </span>
      <span class="space"
        >表格列数：<je-input-number id="inputNumber" v-model:value="number" :min="0"
      /></span>
      <je-button type="text" @click="handleSave"><i class="fal fa-save"></i>保存</je-button>
    </div>
    <je-layout class="list-custom-content">
      <je-layout-sider width="360px" style="background: #fff">
        <je-input-search v-model:value="searchValue" placeholder="请输入关键字" @search="getList" />
        <div class="left-container">
          <div v-for="item in arrList" :key="item.RESOURCEFIELD_CODE" class="left-content">
            <div style="width: 40%">{{ item.RESOURCEFIELD_NAME }}</div>
            <div class="right-padding">{{ item.RESOURCEFIELD_CODE }}</div>
          </div>
        </div>
      </je-layout-sider>
      <je-layout-content style="width: 100%; height: 100%; padding: 20px">
        <je-editor-code
          ref="editor"
          v-model:value="editorCodeValue"
          height="100%"
          width="100%"
          @save="onSave"
        />
      </je-layout-content>
    </je-layout>
  </div>
</template>

<script>
  import { ref, reactive, toRefs, defineComponent, onMounted } from 'vue';
  import { Checkbox, Layout, InputNumber, Button, Input } from 'ant-design-vue';
  import { EditorCode, Modal } from '@jecloud/ui';

  import {
    getData as ListItemCustomGetList,
    ListItemCustomGetDetail,
    ListItemCustomSave,
  } from '@/api/index';

  export default defineComponent({
    name: 'ListItemCustom',
    components: {
      JeButton: Button,
      JeCheckbox: Checkbox,
      JeInputNumber: InputNumber,
      JeLayout: Layout,
      JeLayoutSider: Layout.Sider,
      JeLayoutContent: Layout.Content,
      JeInputSearch: Input.Search,
      JeEditorCode: EditorCode,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: [],
    setup(props, { emit }) {
      const state = reactive({
        funcId: props.recordData.JE_CORE_FUNCINFO_ID,
        arrList: [],
        isChecked: '',
        number: '',
        searchValue: '',
        editor: ref(),
        editorCodeValue: '000000000',
      });
      const methods = {
        getDetail() {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            pkValue: state.funcId,
            queryColumns:
              'JE_CORE_FUNCINFO_ID,FUNCINFO_TABLEVIEW,FUNCINFO_TABLEVIEW_COLS,FUNCINFO_TABLEVIEW_TPL',
          };

          ListItemCustomGetDetail(params)
            .then((res) => {
              state.isChecked = res.FUNCINFO_TABLEVIEW === '1';
              state.number = res.FUNCINFO_TABLEVIEW_COLS;
              state.editorCodeValue = res.FUNCINFO_TABLEVIEW_TPL;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        getList() {
          const params = {
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'RESOURCEFIELD_FUNCINFO_ID',
                  value: state.funcId,
                  type: '=',
                  cn: 'and',
                },
                {
                  code: 'RESOURCEFIELD_XTYPE',
                  value: ['child', 'fieldset', 'displayfield', 'childfuncfield'],
                  type: 'notIn',
                  cn: 'and',
                },
                {
                  type: 'and',
                  value: [
                    { code: 'RESOURCEFIELD_CODE', type: 'like', value: state.searchValue },
                    {
                      cn: 'or',
                      code: 'RESOURCEFIELD_NAME',
                      type: 'like',
                      value: state.searchValue,
                    },
                  ],
                },
              ],
              order: [{ code: 'SY_ORDERINDEX', type: 'asc' }],
            }),
            tableCode: 'JE_CORE_RESOURCEFIELD',
          };

          ListItemCustomGetList(params)
            .then((res) => {
              state.arrList = res;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        onSave(value) {
          state.editorCodeValue = value;
        },

        handleSave() {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            JE_CORE_FUNCINFO_ID: state.funcId,
            FUNCINFO_TABLEVIEW: state.isChecked ? 1 : 0,
            FUNCINFO_TABLEVIEW_COLS: state.number,
            FUNCINFO_TABLEVIEW_TPL: state.editorCodeValue,
          };

          ListItemCustomSave(params)
            .then((res) => {
              console.log(res);
              Modal.message(res.message, 'success');
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
      };

      onMounted(() => {
        methods.getDetail();
        methods.getList();
      });

      return { ...toRefs(state), ...methods };
    },
  });
</script>
<style lang="less" scoped>
  .list-item-custom {
    position: relative;
    height: 100%;
    .header-button {
      padding: 10px 18px;
      background: #f7f9fc;
      .space {
        padding: 0 20px;
      }
    }
    .list-custom-content {
      margin-top: 10px;
      position: absolute;
      top: 40px;
      bottom: 10px;
      left: 0px;
      right: 0px;
    }
    .left-container {
      position: absolute;
      width: 100%;
      top: 30px;
      bottom: 0;
      overflow-y: auto;
      // border-top: 1px solid #d8d8d8;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    .left-content {
      display: flex;
      width: 100%;
      // justify-content: space-between;
      border-right: 1px solid #d8d8d8;
      line-height: 31px;
      div {
        border-bottom: 1px solid #d8d8d8;
        border-left: 1px solid #d8d8d8;
        padding-left: 10px;
      }
      .right-padding {
        width: 60%;
      }
    }
  }
</style>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .je-codeeditor,
  .monaco-editor {
    height: 100% !important;
  }
  .ant-input-number {
    width: 100px;
  }
</style>
